<template>
    <div class="page show-toast-wrapper">
        <p class="show-toast-title">toast展示</p>
        <my-button class="button-item" @button-click="handleClick" text="基础调用" size="lang" />
        <my-button class="button-item" @button-click="handleClickTime" text="指定时间关闭（1s）" size="lang" />
        <my-button class="button-item" @button-click="handleClickMask" text="显示遮罩层" size="lang" />
        <my-button class="button-item" @button-click="handleClickTop" text="偏上显示" size="lang" />
        <my-button class="button-item" @button-click="handleClickBottom" text="偏下显示" size="lang" />
        <my-button class="button-item" @button-click="pushLink" text="查看demo源码" size="lang" />
    </div>
</template>

<script>
    import MyButton from '../components/myButton'
    export default {
        name: 'showToast',
        components: {
            MyButton
        },
        methods: {
            handleClick() {
                this.$toast.show('基础调用')
            },
            handleClickTime() {
                this.$toast.show({
                    text: '1秒后关闭',
                    time: 1000
                })
            },
            handleClickMask() {
                this.$toast.show({
                    text: '遮罩层',
                    isMaskLayer: true
                })
            },
            handleClickTop() {
                this.$toast.show({
                    text: '偏上显示',
                    position: 'top'
                })
            },
            handleClickBottom() {
                this.$toast.show({
                    text: '偏下显示',
                    position: 'bottom'
                })
            },
            pushLink() {
                this.$router.push(`/soundCodeShow${this.$route.fullPath}`)
            }
        },
        created() {
            window.console.log(this.$route)
        }
    }
</script>

<style scoped>
    .show-toast-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .show-toast-wrapper .show-toast-title {
        text-align: left;
        padding: .2rem;
        font-size: .5rem;
        color:cadetblue;
    }
    .show-toast-wrapper .button-item {
        margin-top: .4rem;
    }
</style>
